/*
 * PlateTableView 反应板表格
 */
import QtQuick 2.14
import QtQuick.Controls 2.14
import QtQuick.Layouts 1.14
import Qt.labs.qmlmodels 1.0
import QtGraphicalEffects 1.14
import PlateTableAbstractModel 1.0

Item {
    id: root

    /* property 定义开始 */
    property int plateRowCount: 8 // 反应板行数
    property int plateColCount: 12 // 反应板列数
    // 字母表
    property var alphabetList: ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"]
    // 横向表头高
    property int horizontalHeaderHeight: 32
    // 纵向表头宽
    property int verticalHeaderWidth: 32
    // 表格数据
    // property var tableData: {
    //     A: `{type: "U", sample: "Sample1", dyes: ["F", "V", "R"]}`;
    //     B: `{type: "U", sample: "Sample1", dyes: ["F", "V"]}`;
    //     C: `{type: "U", sample: "Sample2", dyes: ["F", "V", "R"]}`;
    //     D: `{type: "S", sample: "Sample1", dyes: ["F", "V", "R", "C"]}`
    // }

    // private
    property int _itemIndex: 0 // 记录每个代理对象的下表，反推出所在行列
    property var _startPoint: [-1, -1] // 记录起点坐标
    property var _endPoint: [-1, -1] // 记录终点坐标
    property bool _isPressed: false // 鼠标按下信号
    property int _curMouseRow: -1 // 鼠标当前所在行
    property int _curMouseCol: -1 // 鼠标当前所在列

    // 信号
    signal pressedIndex(int index) // 发送表格下标信号

    // 函数
    // 下标转行列
    function index2RowCol(index){
        return [parseInt(index / plateColCount), index % plateColCount]
    }

    // 行列转下标
    function rowCol2Index(row, col){
        return row * plateColCount + col
    }

    /* property 定义结束 */
    Item {
        id: container
        anchors.fill: parent

        // 表格部分
        Rectangle {
            id: table
            anchors.fill: parent
            color: "transparent"
            clip: true
            border.width: 1
            border.color: "transparent"

            // 横向表头
            Item {
                id: horizontalHeader
                height: horizontalHeaderHeight
                anchors.left: parent.left
                anchors.right: parent.right
                anchors.leftMargin: verticalHeaderWidth

                Row {
                    spacing: 0

                    Repeater {
                        model: plateColCount

                        Rectangle {
                            width: horizontalHeader.width / plateColCount
                            height: horizontalHeader.height
                            color: "transparent"
                            border.color: "#fff"
                            border.width: 0

                            Text {
                                text: qsTr((index+1).toString())
                                anchors.centerIn: parent
                                font.pixelSize: 16
                                font.family: "Alibaba PuHuiTi"
                                color: "#fff"
                            }
                        }
                    }
                }
            }

            // 纵向表头
            Item {
                id: verticalHeader
                width: verticalHeaderWidth
                anchors.top: parent.top
                anchors.bottom: parent.bottom
                anchors.topMargin: horizontalHeaderHeight

                Column {
                    spacing: 0

                    Repeater {
                        model: plateRowCount

                        Rectangle {
                            width: verticalHeader.width
                            height: verticalHeader.height / plateRowCount
                            color: "transparent"
                            border.color: "#fff"
                            border.width: 0

                            Text {
                                text: qsTr(alphabetList[index])
                                anchors.centerIn: parent
                                font.pixelSize: 16
                                font.family: "Alibaba PuHuiTi"
                                color: "#fff"
                            }
                        }
                    }
                }
            }

            // 表格内容
            TableView {
                id: tableContent
                anchors {
                    fill: table
                    leftMargin: verticalHeaderWidth
                    topMargin: horizontalHeaderHeight
                }
                contentWidth: parent.width
                contentHeight: parent.height
                clip: true
                interactive: false // 取消轻抚
                boundsBehavior: Flickable.StopAtBounds
                columnSpacing: 0
                rowSpacing: 0

                columnWidthProvider: function(column){
                    return (table.width - verticalHeaderWidth) / plateColCount
                }

                rowHeightProvider: function(row){
                    return (table.height - horizontalHeaderHeight) / plateRowCount
                }

                onWidthChanged: {
                    forceLayout() // 强制重新布局刷新视图
                }

                onHeightChanged: {
                    forceLayout() // 强制重新布局刷新视图
                }

                model: TableModel {
                    id: tableModel

                    TableModelColumn {display: "A"}
                    TableModelColumn {display: "B"}
                    TableModelColumn {display: "C"}
                    TableModelColumn {display: "D"}
                }

                delegate: Rectangle{
                    id: tableDelegate
                    color: "transparent"
                    implicitWidth: tableContent.columnWidthProvider(0)
                    implicitHeight: tableContent.rowHeightProvider(0)
                    border.width: 0

                    Rectangle {
                        id: innerTableDelegate
                        width: parent.width - 2
                        height: parent.height - 2
                        anchors.centerIn: parent
                        color: "#80FFFFFF"

                        layer.enabled: true
                        layer.effect: OpacityMask {
                            maskSource: Rectangle {
                                width: tableDelegate.width
                                height: tableDelegate.height
                                radius: 4
                            }
                        }

                        PlateTableItem {
                            id: tableItem
                            anchors.fill: parent
                            Component.onCompleted: {
                                selfItemIndex = root._itemIndex++ // 记录代理下标
                                // 数据处理
                                analyseItemData(display)
                            }

                            Connections {
                                target: root
                                function onPressedIndex(index){
                                    if(index === tableItem.selfItemIndex)
                                        console.log(index)
                                }
                            }
                        }

                        // 画边框
                        Canvas {
                            anchors.fill: parent
                            onPaint: {
                                var ctx = getContext("2d")
                                ctx.strokeStyle = "transparent"
                                ctx.lineWidth = 2
                                // 右边边框
                                ctx.moveTo(0, 0)
                                ctx.lineTo(0, height)
                                ctx.stroke()
                                // 上边边框
                                ctx.moveTo(0, 0)
                                ctx.lineTo(width, 0)
                                ctx.stroke()
                            }
                        }
                    }

                    MouseArea {
                        anchors.fill: parent
                        hoverEnabled: true
                        onPressed: {
                            _curMouseRow = parseInt(mouse.x / tableContent.rowHeightProvider(0)) > plateRowCount ?
                                        plateRowCount : parseInt(mouse.x / tableContent.rowHeightProvider(0))
                            _curMouseCol = parseInt(mouse.x / tableContent.columnWidthProvider(0)) > plateColCount ?
                                        plateColCount : parseInt(mouse.x / tableContent.columnWidthProvider(0))
                            _startPoint = [_curMouseRow, _curMouseCol]
                            root.pressedIndex(rowCol2Index(_curMouseRow, _curMouseCol))
                            _isPressed = true
                        }
                        onPositionChanged: {
                            if(_isPressed){
                                _curMouseRow = parseInt(mouse.x / tableContent.rowHeightProvider(0)) > plateRowCount ?
                                            plateRowCount : parseInt(mouse.x / tableContent.rowHeightProvider(0))
                                _curMouseCol = parseInt(mouse.x / tableContent.columnWidthProvider(0)) > plateColCount ?
                                            plateColCount : parseInt(mouse.x / tableContent.columnWidthProvider(0))
                                root.pressedIndex(rowCol2Index(_curMouseRow, _curMouseCol))
                            }
                        }
                        onReleased: {
                            _curMouseRow = parseInt(mouse.x / tableContent.rowHeightProvider(0)) > plateRowCount ?
                                        plateRowCount : parseInt(mouse.x / tableContent.rowHeightProvider(0))
                            _curMouseCol = parseInt(mouse.x / tableContent.columnWidthProvider(0)) > plateColCount ?
                                        plateColCount : parseInt(mouse.x / tableContent.columnWidthProvider(0))
                            _endPoint = [_curMouseRow, _curMouseCol]
                            _isPressed = false
                        }
                    }
                }
            }

            Component.onCompleted: {
                // console.log(tableDelegate.width)
                tableModel.appendRow({
                                         A: JSON.stringify({type: "U", sample: "Sample1", dyes: ["F", "V", "R"]}),
                                         B: JSON.stringify({type: "U", sample: "Sample1", dyes: ["F", "V"]}),
                                         C: JSON.stringify({type: "U", sample: "Sample2", dyes: ["F", "V", "R"]}),
                                         D: JSON.stringify({type: "S", sample: "Sample1", dyes: ["F", "V", "R", "C"]})
                                     })
                tableModel.appendRow({
                                         A: JSON.stringify({type: "U", sample: "Sample1", dyes: ["F", "V", "R"]}),
                                         B: JSON.stringify({type: "U", sample: "Sample1", dyes: ["F", "V"]}),
                                         C: JSON.stringify({type: "U", sample: "Sample2", dyes: ["F", "V", "R"]}),
                                         D: JSON.stringify({type: "S", sample: "Sample1", dyes: ["F", "V", "R", "C"]})
                                     })
                tableModel.appendRow({
                                         A: JSON.stringify({type: "U", sample: "Sample1", dyes: ["F", "V", "R"]}),
                                         B: JSON.stringify({type: "U", sample: "Sample1", dyes: ["F", "V"]}),
                                         C: JSON.stringify({type: "U", sample: "Sample2", dyes: ["F", "V", "R"]}),
                                         D: JSON.stringify({type: "S", sample: "Sample1", dyes: ["F", "V", "R", "C"]})
                                     })
                tableModel.appendRow({
                                         A: JSON.stringify({type: "U", sample: "Sample1", dyes: ["F", "V", "R"]}),
                                         B: JSON.stringify({type: "U", sample: "Sample1", dyes: ["F", "V"]}),
                                         C: JSON.stringify({type: "U", sample: "Sample2", dyes: ["F", "V", "R"]}),
                                         D: JSON.stringify({type: "S", sample: "Sample1", dyes: ["F", "V", "R", "C"]})
                                     })
                tableModel.appendRow({
                                         A: JSON.stringify({type: "U", sample: "Sample1", dyes: ["F", "V", "R"]}),
                                         B: JSON.stringify({type: "U", sample: "Sample1", dyes: ["F", "V"]}),
                                         C: JSON.stringify({type: "U", sample: "Sample2", dyes: ["F", "V", "R"]}),
                                         D: JSON.stringify({type: "S", sample: "Sample1", dyes: ["F", "V", "R", "C"]})
                                     })
                tableModel.appendRow({
                                         A: JSON.stringify({type: "U", sample: "Sample1", dyes: ["F", "V", "R"]}),
                                         B: JSON.stringify({type: "U", sample: "Sample1", dyes: ["F", "V"]}),
                                         C: JSON.stringify({type: "U", sample: "Sample2", dyes: ["F", "V", "R"]}),
                                         D: JSON.stringify({type: "S", sample: "Sample1", dyes: ["F", "V", "R", "C"]})
                                     })
            }
        }
    }
}
